<template>
    <div class="box flex-column" v-if="obj.data">
        <div v-if="proxy.$route.query.product_id"  class="w100 flex-row-center mb10">
            <el-icon @click="proxy.$router.go(-1)" class="backicon"><Back /></el-icon>
            <span class="title ml10">{{ obj.data.title }}</span>
        </div>
        <el-carousel height="300px" style="width: 100%;min-height: 300px;">
            <el-carousel-item v-for="item in obj.data.banners" :key="item">
                <el-image v-if="item.indexOf('.mp4')==-1" class="banner mb10" :src="item" fit="cover" :preview-src-list="[item]" />
                <video v-else class="banner mb10" :src="item" controls="controls" />
            </el-carousel-item>
        </el-carousel>
        <div v-if="!obj.data.preferential.length" class="nodata mb10">暂无优惠方案</div>
        <div class="pricebox mb10">
            <div class="flex-row mb10">
                <div class="flex-column mr40">
                    <div class="special_price_desc mb10">价格</div>
                    <span class="min_nums_desc">起订量</span>
                </div>
                <div v-for="(v,i) in obj.data.preferential" :key="i" class="flex-column flex1">
                    <div class="special_price mb10"><span style="font-size: 12px;">¥ </span>{{ Number(v.special_price).toFixed('2') }}</div>
                    <span class="min_nums">{{ v.min_nums }}{{ v.unit }}起批</span>
                </div>
            </div>
            <span class="flex-row-center" style="font-size: 12px;">
                <el-icon style="color: red;margin-right: 3px;"><QuestionFilled /></el-icon>
                <span style="color: #999;">货源所属商家已经过真实性验证</span>
            </span>
        </div>

        <el-descriptions title="产品基本信息" :column="2" size="small" border class="mb10">
            <el-descriptions-item label="最低单价">{{obj.data.min_price}}元</el-descriptions-item>
            <el-descriptions-item label="计量单位">{{obj.data.unit}}</el-descriptions-item>
            <el-descriptions-item label="运输方式">{{obj.data.shipping_type}}</el-descriptions-item>
            <el-descriptions-item label="产品用途">{{obj.data.usage}}</el-descriptions-item>
            <el-descriptions-item label="品牌名称">{{obj.data.brand}}</el-descriptions-item>
            <el-descriptions-item label="产品货号">{{obj.data.itemnumber}}</el-descriptions-item>
        </el-descriptions>

        <el-descriptions title="产品参数" :column="2" size="small" border class="mb10">
            <template v-for="(v,i) in obj.data.parameters" :key="i">
                <el-descriptions-item label="参数名称">{{v.name}}</el-descriptions-item>
                <el-descriptions-item label="参数说明">{{v.desc}}</el-descriptions-item>
            </template>
        </el-descriptions>

        <el-descriptions title="联系信息" :column="2" size="small" border class="mb40">
            <el-descriptions-item label="联系人">{{obj.data.contacts}}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{obj.data.mobile}}</el-descriptions-item>
            <el-descriptions-item label="通讯地址">{{obj.data.address}}</el-descriptions-item>
            <el-descriptions-item label="微信">{{obj.data.weixin}}</el-descriptions-item>
            <el-descriptions-item label="QQ">{{obj.data.qq}}</el-descriptions-item>
            <el-descriptions-item label="电子邮箱">{{obj.data.email}}</el-descriptions-item>
        </el-descriptions>

        <!-- <span class="labeltitle">产品相册</span>
        <div class="image__lazy mb10">
            <el-image v-for="url in obj.data.imgs.albums" :key="url" :src="url" :preview-src-list="[url]" />
        </div>

        <span class="labeltitle">产品视频</span>
        <div class="image__lazy mb10">
            <el-image v-for="url in obj.data.imgs.albums" :key="url" :src="url" :preview-src-list="[url]" />
        </div> -->

        <span class="labeltitle bottomline">产品详情</span>
        <div class="detail" v-html="obj.data.detail"></div>
        <!-- {{ obj.data }} -->
    </div>
</template>


<script setup>
    import { reactive, getCurrentInstance, computed, onMounted } from 'vue'
    import { Back,QuestionFilled } from '@element-plus/icons-vue'
    let { proxy } = getCurrentInstance()
    const props = defineProps({
        data: { type: Object, require: true, default: ()=>{
            return {}
        } },
    })

    let obj = reactive({
        data: null
    })

    onMounted(async()=>{
        init()
    })

    const init=()=>{
        if(proxy.$route.query.product_id){
            proxy.$ajax({
                url: '/manager/product/get',
                data: { product_id: obj.data.product_id },
                bfLoading: true
            }).then(d => {
                obj.data = d.msg||{}
                setdata()
            }).catch(e => {})
        }else{
            obj.data = props.data
            setdata()
        }
    }

    const setdata=()=>{
        obj.data.banners = []
        if(obj.data.imgs&&obj.data.imgs.cover){
            obj.data.banners = [obj.data.imgs.cover]
        }
        if(obj.data.imgs&&obj.data.imgs.albums){
            // obj.data.imgs.albums = obj.data.imgs.albums.split(',')
            obj.data.banners = obj.data.banners.concat(obj.data.imgs.albums.split(','))
        }
        if(obj.data.imgs&&obj.data.imgs.videos){
            // obj.data.imgs.videos = obj.data.imgs.videos.split(',')
            obj.data.banners = obj.data.banners.concat(obj.data.imgs.videos.split(','))
        }
        
    }

</script>

<style lang="scss" scoped>
.box{height: 70vh;overflow-y: auto;}
.backicon{font-size: 22px;font-weight: bold;cursor: pointer;}
.title{font-size: 18px;font-weight: bold;}
.banner{width: 100%;height: 300px;min-height: 300px;}
.nodata{font-size: 12px;color: #999;width: 100%;height: 60px;background: #f9f9f9;border-radius: 5px; display: flex;align-items: center;justify-content: center;}
.pricebox{
    background: #fff9f9;padding: 10px; box-sizing: border-box;
    .special_price_desc{font-size: 14px;color: #999;height: 30px;line-height: 30px;}
    .min_nums_desc{font-size: 14px;color: #999;}
    .special_price{font-size: 20px;font-weight: bold;color: red;height: 30px;line-height: 30px;}
    .min_nums{font-size: 14px;}
}
.labeltitle{font-size: 14px;font-weight: bold;margin-bottom: 12px;}
.bottomline{padding-bottom: 6px; border-bottom: solid 1px #e0e0e0;}
.image__lazy{width: 100%;height: 300px;min-height: 300px;overflow-y: auto;.el-image{width: 100%;}}
.detail{width: 100%;}
::v-deep img{width: 100%;height: auto !important;}
</style>